<!--弹出框-->
<template>
  <!--     弹出框弹出框-->
  <el-dialog :visible.sync="dialogVisible" center width="600px">
    <div class="dialog_content">
      <div class="dialog_title">
        {{ orderType === 1 ? "生成预支付订单" : "生成已支付订单" }}
      </div>
      <el-form
        ref="dialogFrom"
        :label-width="formLabelWidth"
        :model="dialogDate"
        class="dialog_content"
        style="height: 400px"
      >
        <el-form-item class="form_btn">
          <el-button
            icon="el-icon-delete"
            style="color: #0175fa !important"
            type="text"
            @click="removeAll"
          ></el-button>
          <el-button
            icon="el-icon-circle-plus-outline"
            style="color: #0175fa !important"
            type="text"
            @click="addFormItem"
          ></el-button>
        </el-form-item>
        <div
          v-for="(product, index) in dialogDate.transaction"
          :key="product.orderNumber"
          class="dialog_box"
        >
          <el-row style="padding: 0 15px; margin-bottom: 15px">
            <el-col :span="10">
              <el-form-item
                :prop="'transaction.' + index + '.productName'"
                :rules="[{ required: true, message: '商品名不能为空' }]"
              >
                <el-select
                  v-model="product.productName"
                  placeholder="请选择商品"
                >
                  <el-option
                    v-for="item in products"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                :prop="'transaction.' + index + '.quantity'"
                :rules="[
                  { required: true, message: '商品数不能为空' },
                  { type: 'number', message: '商品数必须为数字值' },
                ]"
              >
                <el-input-number
                  v-model="product.quantity"
                  :min="1"
                  :step="1"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="form_btn">
                <el-button
                  icon="el-icon-remove-outline"
                  style="color: red !important; margin-left: 100px"
                  type="text"
                  @click="removeFormItem(index)"
                ></el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="dialog_footer">
      <el-button @click="offDialog">取 消</el-button>
      <el-button type="primary" @click="dialogAdd">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import getTime from "../../../../utils/getTime";

export default {
  props: {
    orderType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      // 表单数据
      dialogDate: {
        transaction: [
          {
            orderNumber: 1,
            quantity: 0,
            productName: "",
            money: 0,
          },
        ],
      },
      formLabelWidth: "120px", // 表单文字宽度
      dialogVisible: false, // 弹窗控制变量
      products: [
        {
          value: "娃哈哈矿泉水",
          label: "娃哈哈矿泉水",
        },
        {
          value: "百岁山",
          label: "百岁山",
        },
        {
          value: "娃哈哈桶装水",
          label: "娃哈哈桶装水",
        },
      ],
    };
  },
  mounted() {
    this.dialogDate.username = JSON.parse(
      window.localStorage.getItem("user")
    ).username;
  },
  methods: {
    // 添加商品
    addFormItem() {
      let index = this.dialogDate.transaction.length - 1;
      let key = this.dialogDate.transaction[index].orderNumber + 1;
      this.dialogDate.transaction.push({
        orderNumber: key,
        quantity: 0,
        productName: "",
      });
    },
    // 移除商品
    removeFormItem(index) {
      if (this.dialogDate.transaction.length > 1) {
        this.dialogDate.transaction.splice(index, 1);
      } else {
        this.$message({
          type: "error",
          message: "已经是左后一个啦！",
        });
      }
    },
    // 清空
    removeAll() {
      // 获取数组长度
      let len = this.dialogDate.transaction.length;
      // 重置表单
      this.$refs.dialogFrom.resetFields();
      // 删除 除第一项的数据
      this.dialogDate.transaction.splice(1, len);
    },
    // 新增
    dialogAdd() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          // 将数据传递至父组件
          let addDate = [];
          that.dialogDate.transaction.forEach((transaction) => {
            let createTime = getTime();
            addDate.push({
              username: that.dialogDate.username,
              transaction,
              createTime,
              paymentType: this.orderType === 1 ? "待支付" : "已支付", // 支付类型
              pledge: {
                // 抵押总金额（元）/数量
                money: 0,
                quantity: 0,
              },
              amount: 0, // 商品金额
              remark: "-------", // 备注
              status: this.orderType === 1 ? "待支付" : "已支付", // 状态
            });
          });
          that.$emit("addList", JSON.stringify(addDate));
          // 关闭弹窗
          that.offDialog();
        } else {
          return false;
        }
      });
    },
    // 结束清空弹窗数据，关闭弹窗
    offDialog() {
      // 回复初始值
      this.removeAll();
      // 关闭弹窗
      this.dialogVisible = false;
    },

    // 开启弹窗，判断是新增还是修改事件
    showDialog() {
      // 开启弹窗
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__body,
/deep/ .el-dialog--center .el-dialog__body {
  padding: 0;
}

.el-form-item {
  margin-bottom: 0;
}

.form_btn .el-button {
  font-size: 28px;
  padding: 5px 0 0 0;
  margin-left: 15px;
}

/deep/ .el-form-item__content {
  margin-left: 0 !important;
}
</style>
